<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <div class="top_content">
                <div class="left_top_content">
                    <h3>新用户<span>注：当月新注册用户</span></h3>
                </div>
				  <div class="right_top_content">
					  <span>时间筛选：</span> <el-date-picker v-model="time_value" type="month" placeholder="请选择年月" @change="change" value-format="YYYY-MM" format="YYYY-MM "/>
				  </div>
                 
            </div>
          <div v-if="init_echart">
            <div class="top_echarts">
				
                <TopEcharts :list="list" />
            </div>
            <div class="top_table" >
                <TopTable :list="list" />
            </div>
            <div class="bottom">
                <h3>订单类别数量top5</h3>
                <div class="bottom_content">
							
                   <!-- <div class="item">
                        <el-button type="primary" size="large" class="button">VIP订单</el-button>

                       
                    </div>
                    <div class="item">
                        <el-button type="primary" size="large" class="button">普通订单</el-button>
                       
                    </div> -->
					<div class="item">
					    <el-button type="primary" link size="large" class="button">VIP订单</el-button>
					    <div class="bottom_echarts">
					        <BottomEcharts id="bottom_echarts_one" :list="list.vip_list"/>
					    </div>
					</div>
					<div class="item">
					    <el-button type="primary" link size="large" class="button">普通订单</el-button>
					    <div class="bottom_echarts">
					        <BottomEcharts id="bottom_echarts_twe" :list="list.list"/>
					    </div>
					</div>
					
					 
					 
                </div>
            </div>
          </div>
        </div>
    </div>
</template>
  
 

<script setup lang="ts">
import Nav from "@/components/public/nav.vue"
import TopEcharts from "@/components/home/data/newusers/topEcharts.vue"
import TopTable from "@/components/home/data/newusers/topTable.vue"
import BottomEcharts from "@/components/home/data/newusers/bottomEcharts.vue"
import { get_newusers } from "@/request/api/data"
import { onMounted, ref } from "vue"
let time_value = ref("")
let list: any = ref({})
let params_init: any = {
    time: null,
}
let init_echart = ref(true)
const get_data_use = async () => {
    let { data } = await get_newusers(params_init)

    list.value = data
    init_data()
}
// 数据处理
const init_data = () => {
    // 返回：一个数组
    let key = Object.keys(list.value.line_chart)
    let arrY: any = []
    let arrX: any = []
    key.forEach((item: any) => {
        let a = new Date(item * 1000);
        arrX.push(a.toLocaleDateString().replace(/\//g, "-"))
        arrY.push(list.value.line_chart[item])
        list.value.arrX = arrX
        list.value.arrY = arrY
    })
}
const change =async(val:any)=>{
    console.log(val,"valvalvalval");
    init_echart.value = false
    params_init.time = val
    await get_data_use()
    init_echart.value = true
}

onMounted(() => {
    get_data_use()
})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;


    .right_route {
        padding: 10px 20px 0 20px;
        flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        .top_content {
            display: flex;
            justify-content: space-between;

            .left_top_content {
                h3 {
                    margin: 10px 0 20px;
                        color: #1f2f3d;
                        font-weight: 400;
                        font-size: 22px;

                    span {
                        @include font(#666666, 14, 32);
                        font-weight: 400;
                        margin-left: 20px;
                    }
                }
            }
        }

        .top_echarts {
            border: 1px solid #ebebeb;
            margin-top: 20px;
			border-radius: 3px;
			    transition: 0.2s;
        }

        .top_table {
            margin-top: 10px;
        }

        .bottom {
            margin-top: 10px;

            h3 {
               margin: 55px 0 20px;
               color: #1f2f3d;
               font-weight: 400;
               font-size:22px;
            }

            .bottom_content {
                display: flex;
                border: 1px solid #ebebeb;
                border-radius: 3px;
                transition: .2s;
                padding: 24px;
                margin-bottom: 50px;

                .item {
                    width: 50%;

                    // text-align: center;
                    .button {
                       width: 140px;
                       height: 40px;
                       margin-left:40%;
                       color:#1f2f3d;
                       border-bottom:1px solid #1f2f3d;
                    }

                    .bottom_echarts {
                        width: 100%;
                        height: 200px;
                    }
                }
            }
        }
    }
}
:deep(.el-input){
  height: 32px;
}
:deep(.el-button){
  height: 32px;
}

</style>